<template>
    <div class="wrapper">
        <v-head v-if="adminVip == 'admin' || adminVip == ''"></v-head>
        <vmHead v-if="adminVip == 'vip' || adminVip == 'member'"></vmHead>
        <v-sidebar v-if="adminVip == 'admin' || adminVip == ''"></v-sidebar>
        <v-tags v-if="adminVip == 'admin' || adminVip == ''"></v-tags>
        <div :class="['content-box', {'member':adminVip=='vip'||adminVip=='member','content-collapse':collapse}]">
            <div class="content_wrapper">
                <div class="content" style="flex:1;">
                    <div class="content_inner">
                        <transition name="move" mode="out-in">
                            <keep-alive :include="tagsList">
                                <router-view></router-view>
                            </keep-alive>
                        </transition>
                    </div>
                </div>
                <v-footer></v-footer>
            </div>
        </div>
    </div>
</template>

<script>
    import vHead from './header.vue';
    import vmHead from './mainHeader.vue';
    import vSidebar from './sidebar.vue';
    import vTags from './tags.vue';
    import vFooter from './footer.vue';
    import bus from './bus';
    export default {
        data() {
            return {
                adminVip: '',
                tagsList: [],
                collapse: false
            }
        },
        components: {
            vHead,
            vmHead,
            vSidebar,
            vTags,
            vFooter
        },
        created() {
            this.adminVip = this.$store.state.role;
            bus.$on('collapse', msg => {
                this.collapse = msg;
            })

            // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
            bus.$on('tags', msg => {
                let arr = [];
                for(let i = 0, len = msg.length; i < len; i++) {
                    msg[i].name && arr.push(msg[i].name);
                }
                this.tagsList = arr;
            })
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        background-color: #fff;
    }
    
    .content_wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    
    .member {
        left: 0;
    }
    
    .member .barCode {
        width: 1200px;
        margin: 0 auto;
    }
    
    .content_inner {
        width: 100%;
        height: 100%;
    }
</style>